//pad设备
var pad = function(){
	this.canvas = document.getElementById("canvas_pad");
	this.ctx = this.canvas.getContext("2d");
	this.drawLinetime = 0;
	this.con_circle_radious=4;//内边距宽
	this.con_rect_startxy = 6;//内部矩形内边距
	this.con_rect_width =0;//内部矩形的宽
	this.con_rect_height =0;//内部矩形的高
	this.line_char_padding = 2;//内部显示的间隔
	this.line_char_height = 5;//内部显示的高度
	this.line_char_size = 0;
	this.line_char=[];//
	this.line_color=["#1ec0ff99","#FFCCCC99","#5BE7C499","#8134af99"]
}

pad.prototype.init=function(){
	//初始化个数
	
	this.line_char=[];
	this.line_char_size= Math.floor(this.con_rect_height / (this.line_char_height + this.line_char_padding));
	for(var i =0;i<this.line_char_size;i++){
		this.line_char.push({
			x:this.con_rect_startxy+1,
			y:this.con_rect_startxy+(i * this.line_char_height) + (this.line_char_padding * i + this.line_char_padding),
			w:this.con_rect_width,
			h:this.line_char_height,
			color:this.line_color[Math.floor(Math.random()*this.line_color.length)]
		})
	}
	
}

pad.prototype.draw=function(){
	// var now = Date.now();
	// this.ctx.clearRect(0, 0, this.width, this.height);
	this.drawRects(this.ctx);
	if(vue.isscanData){
		this.drawContext(this.ctx);
	}
}

//绘制外部框
pad.prototype.drawRects = function(ctx) {
 
	let radious = 5; // 圆角
	let arc_w = 1; //圆半径
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = "#1ec0ff22";
	this.roundFillRect(ctx, 0, 0, this.width, this.height, radious);

	//中间圆
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,0,0,0.5)";
	ctx.arc(this.w_center - (arc_w / 2), (this.con_circle_radious / 2) + (arc_w / 2), arc_w, 0, 2 * Math.PI);
	ctx.fill();

	//清除
	ctx.clearRect(this.con_circle_radious, this.con_circle_radious, this.width - (this.con_circle_radious * 2), this.height - (this.con_circle_radious * 2))

	ctx.beginPath();
	ctx.fillStyle = "#1ec0ff22";

	ctx.rect(this.con_rect_startxy, this.con_rect_startxy, this.width - (this.con_rect_startxy * 2), this.height - (this.con_rect_startxy * 2));
	ctx.fill();
	//
	ctx.restore();
	
	// this.drawContext(ctx, this.con_rect_startxy + 1, con_rect_startxy, (this.width - (con_rect_startxy * 2)) / 1.2, this.height - (this.con_rect_startxy *
	// 2));



}

pad.prototype.drawContext = function(ctx) {
	
	this.drawLinetime += deltaTime;
	 
	if (this.drawLinetime > Math.floor((vue.readCard/5))) {
		for(var i =0;i<this.line_char_size;i++){
			let mw= Math.random() *this.con_rect_width; 
			this.line_char[i].w =mw; 
			this.line_char[i].color=this.line_color[Math.round(Math.random()*this.line_color.length)]
		}
		this.drawLinetime = 0;
	}
	 
	ctx.save();
	// ctx.fillStyle = "#1ec0ff99";
	for(var i =0;i<this.line_char_size;i++){
		ctx.fillStyle = this.line_char[i].color;
		ctx.beginPath();
		let item = this.line_char[i];
		ctx.rect(item.x,item.y,item.w,item.h);
		ctx.fill();
	}
	ctx.restore();
	// let jiange = 2 //间隔
	// let lineh = 5; //每个的高
	// let size = Math.floor(h / (lineh + jiange));

	// ctx.save();
	// ctx.fillStyle = '#C0C0C0';
	// for (var i = 0; i < size; i++) {
	// 	ctx.beginPath();
	// 	 let mw= Math.random() *10; 
	// 	ctx.rect(x, y + (i * lineh) + (jiange * i + jiange), w+mw, lineh);
	// 	ctx.closePath();
	// 	ctx.fill();

	// }
	// ctx.restore();
}

pad.prototype.roundStrokeRect = function(ctx, x, y, w, h, r) {
	if (w < 2 * r) {
		r = w / 2;
	}
	if (h < 2 * r) {
		r = h / 2;
	}
	ctx.beginPath();
	ctx.moveTo(x + r, y);
	ctx.arcTo(x + w, y, x + w, y + h, r);
	ctx.arcTo(x + w, y + h, x, y + h, r);
	ctx.arcTo(x, y + h, x, y, r);
	ctx.arcTo(x, y, x + w, y, r);
	ctx.closePath();
	ctx.stroke();
}

pad.prototype.roundFillRect = function(ctx, x, y, w, h, r) {
	if (w < 2 * r) {
		r = w / 2;
	}
	if (h < 2 * r) {
		r = h / 2;
	}
	ctx.beginPath();
	ctx.moveTo(x + r, y);
	ctx.arcTo(x + w, y, x + w, y + h, r);
	ctx.arcTo(x + w, y + h, x, y + h, r);
	ctx.arcTo(x, y + h, x, y, r);
	ctx.arcTo(x, y, x + w, y, r);
	ctx.closePath();
	ctx.fill();
}


pad.prototype.size=function(){
	this.canvanRect = this.canvas.getBoundingClientRect();
	let radi = window.devicePixelRatio;
	this.width = this.canvanRect.width;
	this.height = this.canvanRect.height;
	// console.log("pad改变尺寸 w h ",this.width,this.height);
	this.canvas.style.width = this.width+"px";
	this.canvas.style.height = this.height+"px";
	this.canvas.width = this.width * radi;
	this.canvas.height = this.height * radi;
	this.ctx.scale(radi,radi);
 
	this.w_center = this.width/2;
	this.h_center =  this.height/2;
	
	
	this.con_rect_width =  this.width - (this.con_rect_startxy * 2)-2;
	this.con_rect_height = this.height - (this.con_rect_startxy *2);
	
	
}
